<template>
  <div class="container">
    <div class="app-container">
      <div class="app-container">
        <!-- 头部表单 -->
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="车牌号码:">
            <el-input v-model="pageParams.carNumber" placeholder="请输入内容" />
          </el-form-item>
          <el-form-item label="车主姓名:">
            <el-input v-model="pageParams.personName" placeholder="请输入内容" />
          </el-form-item>
          <el-form-item label="状态:">
            <el-select v-model="pageParams.cardStatus" placeholder="未选择">
              <el-option label="全部" value="null" />
              <el-option label="可用" value="0" />
              <el-option label="已过期" value="1" />
            </el-select>
            <el-form-item>
              <el-button type="primary" style="margin-left: 20px;" @click="onSearch">查询</el-button>
            </el-form-item>
          </el-form-item>
        </el-form>
        <!-- 角色管理内容 -->
        <div class="role-operate">
          <el-button size="mini" type="primary" @click="$router.push({path:'/cardAdd',params:{title:'添加月卡'}})">添加月卡</el-button>
          <el-button size="mini" type="primary">批量删除</el-button>
        </div>

        <!-- 放置table组件 -->
        <el-table :data="list">
          <!-- 放置列 -->
          <!-- <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">全选</el-checkbox>
          <div style="margin: 15px 0;" />
          <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
            <el-checkbox v-for="city in cities" :key="city" :label="city">{{ city }}</el-checkbox>
          </el-checkbox-group> -->s
          <el-table-column align="center" label="序号" width="100" type="index" />
          <el-table-column align="center" label="车主名称" width="200" prop="personName" />
          <el-table-column align="center" label="车牌号码" width="200" prop="carNumber" />
          <el-table-column align="center" label="车辆品牌" width="200" prop="carBrand" />
          <el-table-column align="center" label="剩余有效天数" width="200" prop="totalEffectiveDate" />
          <el-table-column align="center" label="状态" width="200" prop="cardStatus">
            <template v-slot="{ row }">
              <span v-if="row.cardStatus === 0">可用</span>
              <span v-else-if="row.cardStatus === 1">已过期</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="200">
            <template v-slot="{ row }">
              <el-button size="mini" type="text">分配权限</el-button>
              <el-button size="mini" type="text" @click="editCard(row.id)">编辑</el-button>
              <el-button size="mini" type="text" @click="delCard(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 放置分页组件 -->
        <el-row type="flex" style="height: 60px;" align="middle" justify="center">
          <el-pagination
            :page-size="pageParams.pagesize"
            :current-page="pageParams.page"
            :total="total"
            layout="total,prev, pager, next"
            @current-change="changePage"
          />
        </el-row>
      </div>
    </div>
  </div>
</template>
<script>
import { getMonthlyCardManagementListApi, delCardApi } from '@/api/monthlyCard'
export default {
  name: 'MonthlyCardManagement',
  data() {
    return {
      list: [],
      pageParams: {
        page: 1, // 第几页
        pagesize: 5, // 每页多少条
        carNumber: '', // 车牌号
        personName: '', // 车主姓名
        cardStatus: '0' // 状态 '0':可用，'1':已过期
      },
      showDialog: false,
      rules: {
        name: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }],
        description: [{ required: true, message: '角色描述不能为空', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.getMonthlyCardManagementList()
  },
  methods: {
    async getMonthlyCardManagementList() {
      const { rows, total } = await getMonthlyCardManagementListApi(this.pageParams)
      this.list = rows
      this.total = total
    },
    // 切换分页时 请求新的数据
    changePage(newPage) {
      this.pageParams.page = newPage // 赋值当前页码
      this.getMonthlyCardManagementList()
    },
    async onSearch() {
      this.pageParams.page = 1
      this.getMonthlyCardManagementList()
    },
    async delCard(id) {
      await delCardApi(id)
      this.$Message.success('删除成功')
    },
    editCard(id) {
      this.$router.push({
        path: '/cardAdd',
        query: {
          id
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.app-container{
  padding: 10px;
}
.role-operate {
  padding: 10px;
}
</style>
